import { Checkbox, List, Typography } from "antd"
import useGetCategories from "../../helpers/getCategories"

export default function FilterByCategory(props) {
    const onChange = value => props.handleFilter(value)
    const categories = useGetCategories()
    const { Title } = Typography
    return (
        <>
            <Title level={5}>按照分类筛选</Title>
            <Checkbox.Group onChange={onChange}>
                <List dataSource={categories} renderItem={item => <List.Item>
                    <Checkbox value={item._id}>{item.name}</Checkbox>
                </List.Item>} />
            </Checkbox.Group>
        </>
    )
}